import { reactive } from 'vue';
import type { FormRules } from 'element-plus';
// enum FromType {
//   Input = 'Input',
// }
type TFormType = 'Input' | 'Select' | 'Picker' | 'Switch';

// interface FormRule {
//   [propName: string]: any[];
// }

export interface IFromItem {
  type: TFormType; // 大类  比如是输入框  有时候是 单行输入框  有时候  文本框
  label: string;
  prop: string;
  options?: Array<{ label: string; value: string | number }>;
  placeholder?: string;
}

export interface IrowCol {
  xl?: number;
  lg?: number;
  md?: number;
  sm?: number;
  xs?: number;
}

export const formOptions: IFromItem[] = [
  {
    type: 'Input',
    label: '用户名',
    prop: 'name',
  },
  {
    type: 'Input',
    label: '手机号',
    prop: 'cellphone',
  },
  // {
  //   type: 'Select',
  //   label: '性别',
  //   prop: 'sex',
  //   options: [
  //     {
  //       label: '男',
  //       value: 1,
  //     },
  //     {
  //       label: '女',
  //       value: 0,
  //     },
  //   ],
  // },
];

export const formRowColSpan: IrowCol = {
  xl: 6,
  lg: 8,
  md: 12,
  sm: 24,
  xs: 24,
};

export const labelWidth = '100px';
export const rules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'blur',
    },
  ],
});

// export const formVars = reactive({
//   name: '',
// });
